<template>
  <div class="flvTool" :ref="flvToolId+'father'"  :style="{background:flvPlayer==null?'rgba(15,15,5,0.98)':''}" @mousemove="showControl">
    <div v-if="flvPlayer==null" class="player"></div>
    <video :id="flvToolId"  style="width: 100%;height: 100%;object-fit: fill"  :ref="flvToolId" autoplay muted></video>
    <div class="videoControlBox">
      <div class="player-control-wrap" v-show="isShowControl">
        <div class="player-control">
          <div class="player-control-left">
            <el-button type="text" @click.stop="changeVideoState">
              <img v-if="isPlay != 1" title="开始" src="@/assets/image/video/kaishi.png" alt/>
              <img v-else title="暂停" src="@/assets/image/video/zantingtingzhi.png" alt/>
            </el-button>
          </div>
          <div class="player-control-center"/>
          <div class="player-control-right">
            <el-button type="text" @click.stop="handleFullscreen">
              <img v-if="isFullScreen != 1" title="全屏" src="@/assets/image/video/quanping.png" alt/>
              <img v-else title="退出全屏" src="@/assets/image/video/tuichuquanping.png" alt/>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import flvjs from 'flv.js';

  export default {
    name: 'flvTool',
    props: {
      // 视频id/video外容器id
      flvToolId: {
        type: String,
        default: 'flvToolId'
      },
      // 视频播放地址
      flvUrl: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        /*视频控制栏显示，定时隐藏相关*/
        flvPlayer: null,
        isPlay: true,/*是否暂停*/
        isFullScreen: false,
        isShowControl: false,/*是否展示工具栏*/
        controlTime: 0,/*工具栏展示剩余时间*/
        controlTimer: null/*工具栏定时器*/,
        timer:null,
        calculator:0
      };
    },
    watch: {
      flvUrl:{
        handler(){
          this.$nextTick(() => {
            this.init();
            // 如果30分钟内没有操作。自动关闭视频
            this.calculator=0;
            this.timer = setInterval(() => {
              if(this.calculator>=1800){
                this.$emit('stopOperation');
                this.destruction();
              }else {
                this.calculator++;
              }
            },1000);
            document.addEventListener('mousemove',() => {
              this.calculator=0;
            });
          });
        },
        deep:true,
        immediate:true
      }
    },
    methods: {
      // 鼠标悬浮在视频上方时，工具栏出现
      showControl() {
        if (this.isShowControl) {
          this.controlTime = 3;
        } else {
          this.isShowControl = true;
          this.controlTimer = setInterval(() => {
            this.controlTime--;
            if (this.controlTime <= 0) {
              this.controlTime = 0;
              this.isShowControl = false;
              clearInterval(this.controlTimer);
            }
          }, 1000);
        }
      },
      // 视频播放/暂停
      changeVideoState() {
        if (!this.isPlay) {
          // 若是视频处于播放状态
          this.flvPlayer.play();
        } else {
          this.flvPlayer.pause();
        }
        this.$emit('videoChange', this.isPlay);
        this.isPlay = !this.isPlay;
      },
      // 全屏/缩小
      handleFullscreen() {
        if (document.fullscreen) {
          document.exitFullscreen();
        } else {
          let requestMethod =
            this.$refs[this.flvToolId + 'father'].webkitRequestFullScreen ||
            this.$refs[this.flvToolId + 'father'].msRequestFullscreen ||
            this.$refs[this.flvToolId + 'father'].mozRequestFullScreen;
          requestMethod.call(this.$refs[this.flvToolId + 'father']);
        }
      },
      // 初始化视频
      init(){
        if (flvjs.isSupported()) {
          if(this.flvUrl===''||this.flvUrl===null){
            this.destruction();
            return;
          }
          if(this.flvPlayer!==null){
            this.destruction();
          }
          this.flvPlayer = flvjs.createPlayer(
            {
              type: 'flv', // 类型只有 flv 和 mp4
              isLive: true,
              url: this.flvUrl
            });
          this.flvPlayer.attachMediaElement(this.$refs[this.flvToolId]);
          this.flvPlayer.load();
        }
      },
      // 销毁视频
      destruction(){
        if(this.flvPlayer!=null){
          this.flvPlayer.pause();
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
          if (this.timer != null) {
            clearInterval(this.timer);
            this.timer = null;
          }
        }

      }
    },
    deactivated() {
      this.destruction();
    },
    destroyed() {
      this.destruction();
    }
  };
</script>

<style lang="scss" scoped>
  .flvTool {
    width: 100%;
    height: 100%;
    position: relative;
    .player{
      background: url('~@/assets/image/aqjygl/icon1.png');
      width: 50px;
      height: 50px;
      background-size: 100% 100%;
      top:50%;
      z-index: 70;
      position: absolute;
      left: 50%;
      cursor: pointer;
      transform: translate(-50%,-50%);
    }
    .videoControlBox {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      z-index: 10;

      .player-control-wrap {
        z-index: 70;
        padding: 0 12px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 48px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.6);
        box-sizing: border-box;

        .player-control {
          display: flex;
          justify-content: space-between;

          img {
            width: 20px;
          }

          &-left {
            display: flex;
            cursor: pointer;
          }

          &-right {
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }

    html:-ms-fullscreen {
      width: 100%;
    }

    :-webkit-full-screen {
      background: #666;
    }
  }
</style>
